<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <div>
<!--          <Button-->
<!--            type="primary"-->
<!--            icon="md-add"-->
<!--            @click="bloc.changeDetailModal(0)"-->
<!--            v-if="Validation.check(Resources.AFFILIATE_ADD)"-->
<!--          >添加成员</Button>-->
        </div>
        <Input
          placeholder="昵称"
          v-model="bloc.form.nickname"
          style="width: 180px;margin-right: 10px"
        />
        <DatePicker
          type="daterange"
          placeholder="添加时间"
          format="yyyy/MM/dd"
          v-model="bloc.form.date"
          style="width: 200px;margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
        >查询</Button>
        <Button icon="md-refresh" style="margin-right: 10px" size="default" @click="bloc.reset()">重置</Button>
      </div>
    </Row>
    <Row>
      <div>
        <Table
          border
          ref="selection"
          :loading="bloc.loading"
          :columns="columns"
          highlight-row
          :data="bloc.paged.items"
        >
          <template slot-scope="{ row }" slot="action">
            <Button
              style="margin-left: 5px; margin-right: 5px; "
              @click="bloc.changeDetailModal(row.id)"
              type="info"
              v-if="Validation.check(Resources.AFFILIATE_UPDATE)"
            >编辑</Button>
            <Button
              style="margin-left: 5px; margin-right: 5px; "
              type="success"
              @click="$router.push(`/member/DetailDetail/${row.id}`)"
              v-if="Validation.check(Resources.AFFILIATE)"
            >成员详情</Button>
            <Button
              style="margin-left: 5px; margin-right: 5px; "
              @click="removeItem(row)"
              type="error"
              v-if="Validation.check(Resources.AFFILIATE_DELETE)"
            >删除</Button>
          </template>
          <template slot-scope="{ row, index }" slot="birthday">
            <span>{{$moment(row.birthday).format('YYYY-MM-DD')}}</span>
          </template>
          <slot name="footer" slot="footer">
            <Page
              show-elevator
              show-total
              show-sizer
              :total="bloc.paged.itemCount"
              :current="bloc.paged.pageIndex"
              :page-size="bloc.paged.pageSize"
              :page-size-opts="[15, 30, 50, 100]"
              @on-change="val=>bloc.load(val, bloc.paged.pageSize)"
              @on-page-size-change="val=>bloc.load(bloc.paged.pageIndex, val)"
            />
          </slot>
        </Table>
      </div>
    </Row>
    <FormDetailModal
      :showDetailModal="bloc.isShowDetailModal"
      :idx="bloc.detailMemberId"
      :memberId="bloc.memberId"
      @closeModal="bloc.changeDetailModal(0)"
    ></FormDetailModal>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { DetailBloc } from '@/view/member/bloc/DetailBloc';
import FormDetailModal from '@/view/member/FormDetailModal.vue';
import { Member } from '@/base/model/Member';
import { formatDate } from '@/base/util/Dates';
import { Affiliate } from '@/base/model/Affiliate';
import { Validation } from '@/base/Validation';
import { Resources } from '@/base/Resources';

const columns = (bloc: DetailBloc) => [
  {
    type: 'selection',
    width: 60,
    align: 'center'
  },
  {
    title: '昵称',
    key: 'nickname',
    align: 'center'
  },
  {
    title: '性别',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: params.row.sex === 'M' ? '男' : '女'
        }
      });
    },
    align: 'center'
  },
  {
    title: '身高(cm)',
    key: 'height',
    align: 'center'
  },
  {
    title: '生日',
    slot: 'birthday',
    align: 'center'
  },
  {
    title: '体重(kg)',
    key: 'weight',
    align: 'center'
  },
  {
    title: '添加时间',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: formatDate(
            new Date(params.row.created),
            'yyyy-MM-dd hh:mm:ss'
          )
        }
      });
    },
    width: 180,
    align: 'center'
  },
  {
    title: '操作',
    slot: 'action',
    width: 260,
    align: 'center'
  }
];

@Component({
  components: {
    FormDetailModal
  }
})
export default class extends Vue {
  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      if (!vm.isAdd) {
        vm.bloc.memberId = vm.idx;
        vm.bloc
          .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize, vm.idx)
          .catch((e) => {
            vm.$Message.error('操作错误');
          });
      }
    });
  }

  get idx() {
    return Number(this.$route.params.id);
  }

  Validation = Validation;
  Resources = Resources;
  bloc: DetailBloc = new DetailBloc();
  columns = columns(this.bloc);

  removeItem(dataItem: Affiliate) {
    this.$Modal.confirm({
      title: '提示',
      content: '确认删除后将无法恢复！还要继续吗？',
      okText: '删除',
      cancelText: '取消',
      onOk: () => {
        this.bloc
          .removeItem(dataItem)
          .then(() => {
            this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
          })
          .then(() => {
            this.$Message.success('删除成功');
          })
          .catch((e) => {
            this.$Message.error('删除失败');
          });
      }
    });
  }

  handleSelectAll(status) {
    let el: any = this.$refs.selection;
    el.selectAll(status);
  }
}
</script>

<style lang="less">
</style>
